<template>
  <div
    v-loading="loading"
    v-empty="nopermission"
    class="rc-cont"
    xs-empty-icon="nopermission"
    :xs-empty-text="$t('crm.components.9ce8adf58ad052fe50292f3373d4d7dd')">
    <el-table
      v-show="fieldList.length > 0"
      :data="list"
      :height="tableHeight"
      stripe>
      <el-table-column
        v-for="(item, index) in fieldList"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        show-overflow-tooltip />
      <el-table-column
        prop="type"
        :label="$t('crm.components.e4d03082f32c735ee63fe3bb5b8bb3a2')"
        width="200px">
        <template slot-scope="scope">
          {{ typeArr[scope.row.type] }}-{{ stateArr[scope.row.state] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="audio"
        :label="$t('crm.components.77a554350d027772f72b95a1e41cb995')"
        width="300px">
        <template slot-scope="{ row }">
          <audios :duration="row.talkTime" :props="getAudiosProps(row)" />
        </template>
      </el-table-column>
      <el-table-column
        prop="down"
        :label="$t('crm.components.482307832e2f7a20f60bc82d04c8d58f')"
        width="80px">
        <template slot-scope="scope">
          <el-button
            type="primary-text"
            style="padding: 0;"
            @click="download(scope.row.callRecordId, scope.row.fileName)">
            {{ $t('crm.components.67619305aaf29556f0198c61cb484d1d') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script type="text/javascript">
import { crmCallDownloadAPI } from '@/api/bi/callCenter'
import { crmCustomerCallRecordAPI } from '@/api/crm/customer'

import Audios from '@/components/Audios'

import { downloadFileWithBuffer } from '@/utils'

export default {
  name: 'RelativeCallRecord', // 相关呼叫记录
  components: {
    Audios
  },
  mixins: [],
  inject: ['rootTabs'],
  props: {
    id: [String, Number],
    crmType: {
      type: String,
      default: ''
    },
    detail: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      loading: false,
      nopermission: false,
      list: [],
      fieldList: [
        { prop: 'ownerUserName', label: this.$t('crm.components.7da3c81350e54fecf963848f42165fc9'), width: '115px' },
        { prop: 'createTime', label: this.$t('crm.components.b27cf652212b37dfac1b388e63bff2da'), width: '115px' },
        { prop: 'number', label: this.$t('crm.components.b60c4c01fee2fa53a479b4732e3d5d5a'), width: '115px' },
        { prop: 'talkTime', label: this.$t('crm.components.d733c77867b4957a24042668d792669f'), width: '115px' },
        { prop: 'dialTime', label: this.$t('crm.components.df4dfa05cd62a2732da969c31476eb89'), width: '115px' }
      ],
      tableHeight: '450px',
      stateArr: [
        this.$t('crm.components.5174412a49c83586b386c117260874e6'),
        this.$t('crm.components.80eae5556dd81b39d9a455581ca05fd7'),
        this.$t('crm.components.236c0c2cd8173442e852b54c7f123a56'),
        this.$t('crm.components.c5d51a1901c066a502bf2a9aee789bd1')
      ],
      typeArr: [
        this.$t('crm.components.ca2ccb39c9411f374b7461652b3a5ef7'),
        this.$t('crm.components.08f8b1f862f42a97dedf1c2c58fbde82')
      ]
    };
  },
  computed: {},
  watch: {
    id(val) {
      this.list = []
      this.getDetail()
    },

    'rootTabs.currentName'(val) {
      if (val === 'RelativeCallRecord') {
        this.getDetail(false)
      }
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    /**
     * 获取数据
     */
    getDetail(loading = true) {
      this.loading = loading
      crmCustomerCallRecordAPI({
        pageType: 0,
        customerId: this.id
      })
        .then(res => {
          this.nopermission = false
          this.loading = false
          this.list = res.data.list
        })
        .catch(res => {
          if (res.code == 102) {
            this.nopermission = true
          }
          this.loading = false
        })
    },

    /**
     * @description: 获取录音文件的配置
     * @param {*}
     * @return {*}
     */
    getAudiosProps(item) {
      return {
        fileRequest: crmCallDownloadAPI, // 添加请求和参数
        fileParams: { id: item.callRecordId }
      }
    },

    /**
     * 音频下载
     */
    download(id, fileName) {
      crmCallDownloadAPI({ id: id }).then(res => {
        downloadFileWithBuffer(res.data, fileName)
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../styles/relativecrm.scss";
</style>
